<template>
  <div class="content-box">
    <!--<div class="address">
      <div>
        <p>您当前所在位置</p>
        <router-link to="/" class="link">售后状态记录-团体</router-link>
      </div>
    </div>-->
    <div class="roder-details">
      <div class="info">
        <h3 class="title">售后记录跟踪</h3>
        <h4 class="title10">{{ detail.createTime }}</h4>
        <div class="text11">
          <!--<p>申请售后：</p>-->
          <div>
            <!--            <p>售后类型：{{this.detail.afterSalesString}}</p>-->
            <!--            <p>售后原因：{{ detail.reason }}</p>-->
            <p>金额：{{ detail.afterPrice }}</p>
            <h4 class="title10">售后产品人员列表</h4>
            <a-table class="table1" lign="center"
                     rowKey="id"
                     :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                     :columns="column2"
                     :pagination="ipagination1"
                     @change="handleTableChange2"
                     :data-source="data1">
              <!-- <a slot="k7" slot-scope="text" style="color:#C49D18">{{text}}</a> -->
              <span slot="k7" slot-scope="text, record">
                  <a
                    @click="$router.push({path:'/orderCenter/afterNumbers',query:{id:record.id,afterCode:$route.query.after,isafter:record.isAfter}})">查看参数</a>&nbsp;
                </span>
            </a-table>

            <h4 class="title10" style="margin-top: 20px">面料列表</h4>
            <a-table class="table1" lign="center"
                     rowKey="id"
                     :columns="columnFabric"
                     :pagination="false"
                     :data-source="FabricList">
            </a-table>

          </div>
        </div>

        <a-row :gutter="24" v-if="data1.length!=0">
          <a-col :md="6" :sm="12">
            <a-form-item label="备注">
              <a-textarea
                v-model="remark"
                placeholder="请输入备注"
                :auto-size="{ minRows: 3, maxRows: 10 }"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24" v-if="data1.length!=0">
          <a-col :md="6" :sm="12">
            <a-form-item>
              <a-button @click="afterAgreeFunc(1)" type="primary">通过审核</a-button>
              <a-button @click="afterAgreeFunc(0)" type="primary" style="margin-left: 10px">驳回售后</a-button>
            </a-form-item>
          </a-col>
        </a-row>

        <!--被拒绝的列表-->
        <h3 class="title">已拒绝</h3>
        <div v-for="(item,key) in RefustProductList" :key="item.id">
          <h4 class="title10">{{ item.createTime }}</h4>
          <div class="text11">
            <!--<p>售后状态：</p>-->
            <div>
              <!--<p>售后状态：已拒绝</p>-->
              <p>备注信息：{{ item.reason }}</p>

              <!--              <div class="table-css" style="width: 800px;">-->
              <a-table class="table1" lign="center"
                       :pagination="false"
                       :columns="column1" :data-source=item.afterProductList>
              </a-table>
              <!--              </div>-->
            </div>
          </div>
        </div>

        <!--已同意-->
        <h3 class="title">已同意</h3>
        <div v-for="(item,key) in AgreeProductList" :key="item.id">
          <h4 class="title10">{{ item.createTime }}</h4>
          <div class="text11">
            <!--<p>售后状态：</p>-->
            <div>
              <!--<p>售后状态：已同意</p>-->
              <p>备注信息：{{ item.reason }}</p>

              <!--              <div class="table-css" style="width: 800px;">-->
              <a-table class="table1" lign="center"
                       :pagination="false"
                       :columns="column1" :data-source=item.afterProductList>
              </a-table>
              <!--              </div>-->
            </div>
          </div>
        </div>

        <!--平台发货-->
        <h3 class="title">平台收货</h3>
        <div v-for="(item,key) in ReceivingList" :key="item.id">
          <h4 class="title10">{{ item.createTime }}</h4>
          <div class="text11">
            <!--<p>售后状态：</p>-->
            <div>
              <p>售后状态：准备收货</p>
              <p>运单号：{{ item.thirdSn }}</p>
              <p>备注信息：{{ item.remark }}</p>
            </div>
          </div>

          <a-row :gutter="24">
            <a-col :md="6" :sm="12">
              <a-form-item label="备注" v-show="item.isGet==0">
                <a-textarea
                  v-model="item.remark2"
                  placeholder="请输入备注"
                  :auto-size="{ minRows: 3, maxRows: 10 }"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :md="6" :sm="12">
              <a-form-item v-show="item.isGet==0">
                <a-button @click="receiptsOrSubmitFunc(item.id,0,item.remark2)" type="primary">提交</a-button>
                <a-button @click="receiptsOrSubmitFunc(item.id,1,item.remark2)" type="primary"
                          style="margin-left: 10px">确认收货
                </a-button>
              </a-form-item>
            </a-col>
          </a-row>

        </div>

        <!--产品已收-->
        <h3 class="title">产品已收</h3>
        <!--        <div class="table-css" style="width: 800px;">-->
        <a-table class="table1" lign="center"
                 rowKey="id"
                 :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                 :pagination="false"
                 :data-source="productGetList"
                 :columns="Productget">
            <span slot="k7" slot-scope="text, record">
              <a @click="getupdateIDfunc(record.id)">更新产品状态</a>&nbsp;
            </span>
        </a-table>
        <!--        </div>-->

        <!--更新产品状态的弹框-->
        <a-modal
          title="更新产品状态"
          v-model:visible="visible"
          @ok="updateAfterProFunc"
        >
          <span>产品状态：</span>
          <a-select
            placeholder="请选择"
            v-model:value="ProductStatus"
            style="width: 120px"
            ref="select"
          >
            <a-select-option value="1">
              缝制
            </a-select-option>
            <a-select-option value="2">
              滚烫
            </a-select-option>
            <a-select-option value="3">
              入库
            </a-select-option>
          </a-select>

        </a-modal>

        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <p style="height:60px"></p>
          </a-col>
        </a-row>

        <h3 class="title">批次装箱</h3>
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">

              <a-col :md="6" :sm="12">
                <a-form-item>
                  <a-input v-model="batchName" placeholder="请输入批次名称"></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-button type="primary" @click="getBatchByCodeFunc">搜索</a-button>
              </a-col>

            </a-row>
          </a-form>
          <p>批次信息：{{ BatchDetail.batchName }}</p>
          <span>部门：{{ BatchDetail.departName }}</span>
          <span style="margin-left: 20px">收货地址：{{ BatchDetail.address }}</span>

          <div v-if="BatchDetail.batchName !='' && BatchDetail.batchName !=null ">
            <a-button style="display: block;margin-top:10px;margin-bottom: 10px" type="primary"
                      @click="$router.push({path:'/orderCenter/saveBox',query:{batch:BatchDetail.id,order:$route.query.orderSn}})">
              新增装箱单
            </a-button>
            <!--            <div class="table-css" style="width: 800px;">-->
            <a-table class="table1" lign="center"
                     rowKey="id"
                     :pagination="false"
                     :data-source="BatchDetail.batchPackingInfoList"
                     :columns="boxList">
            <span slot="k7" slot-scope="text, record">
              <a-popconfirm title="确定添加?" @confirm="() => addProductonBox(record.id)">
                    <a style="color:deepskyblue">添加产品</a>
                  </a-popconfirm>
            </span>
            </a-table>

            <a-row :gutter="24">
              <a-col :md="6" :sm="12">
                <a-form-item label="备注">
                  <a-textarea
                    v-model="packageRemark"
                    placeholder="请输入备注"
                    :auto-size="{ minRows: 3, maxRows: 10 }"
                  />
                </a-form-item>
              </a-col>
            </a-row>

            <a-row :gutter="24">
              <a-col :md="6" :sm="12">
                <a-form-item>
                  <a-button @click="saveProInPPackageFunc" type="primary">保存</a-button>
                </a-form-item>
              </a-col>
            </a-row>
            <!--            </div>-->
          </div>

          <h3 class="title" style="margin-top:20px">售后产品发货</h3>
          <a-table class="table1" lign="center"
                   :pagination="false"
                   :columns="column2" :data-source="outAfterProList">
                <span slot="k7" slot-scope="text, record">
                  <a @click="watchBatchFunc(record)">查看</a>&nbsp;
                </span>
          </a-table>

          <!--更新产品状态的弹框-->
          <a-modal
            title="查看批次信息"
            v-model:visible="visible2"
            @ok="closeModel"
          >
            <p>批次名称：{{ ProPici }}</p>
            <p>装箱单名称：{{ ProBoxName }}</p>
            <p>运单号：{{ ProThreadSn }}</p>
          </a-modal>

          <a-row :gutter="24">
            <a-col :md="6" :sm="12">
              <p style="height:60px"></p>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>
  </div>

</template>

<script>

// 装箱单列表
const boxList = [
  {
    dataIndex: 'k1',
    key: 'k1',
    title: '序号',
    width: 60,
    align: "center",
    customRender: function (t, r, index) {
      return parseInt(index) + 1;
    }
  },
  {
    title: '装箱名称',
    dataIndex: 'packingName',
  },
  {
    title: '装箱单编号',
    dataIndex: 'code',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
  },
  {
    title: '操作',
    key: 'k7',
    dataIndex: 'k7',
    scopedSlots: {
      customRender: 'k7'
    },
  }
];

// 售后产品人员列表 售后的小产品表
const column2 = [{
  dataIndex: 'k1',
  key: 'k1',
  title: '序号',
  width: 60,
  align: "center",
  customRender: function (t, r, index) {
    return parseInt(index) + 1;
  }
},
  {
    title: '采购项',
    dataIndex: 'departName',
    key: 'k2',
  },
  {
    title: '小产品编号',
    dataIndex: 'code',
  },
  {
    title: '员工姓名',
    dataIndex: 'customerName',
    key: 'k3',
  },
  {
    title: '员工工号',
    key: 'k4',
    dataIndex: 'customerCode'
  },
  {
    title: '品类名称',
    key: 'k5',
    dataIndex: 'productName'
  },
  {
    title: '售后类型',
    key: 'k6',
    dataIndex: 'isAfter',
    customRender: (isAfter) => {
      //字典值替换通用方法
      if (isAfter == 1)
        return "返修";
      else if (isAfter == 2)
        return "重做";
    }

  },
  {
    title: '操作',
    key: 'k7',
    dataIndex: 'k7',
    scopedSlots: {
      customRender: 'k7'
    },
  }
];


// 售后产品人员列表 售后的小产品表
const columnFabric = [{
  dataIndex: 'k1',
  key: 'k1',
  title: '序号',
  width: 60,
  align: "center",
  customRender: function (t, r, index) {
    return parseInt(index) + 1;
  }
},
  /*{
    title: '采购项',
    dataIndex: 'departName',
    key: 'k2',
  },
  {
    title: '小产品编号',
    dataIndex: 'code',
  },
  {
    title: '员工姓名',
    dataIndex: 'customerName',
    key: 'k3',
  },
  {
    title: '员工工号',
    key: 'k4',
    dataIndex: 'customerCode'
  },
  {
    title: '品类名称',
    key: 'k5',
    dataIndex: 'productName'
  },*/
  {
    title: '面料编号',
    key: 'k5',
    dataIndex: 'fabricCode'
  },
  {
    title: '重做米数',
    key: 'k5',
    dataIndex: 'mishu'
  },
  {
    title: '面料金额',
    key: 'k5',
    dataIndex: 'cprice'
  },
];

const column1 = [{
  dataIndex: 'k1',
  key: 'k1',
  title: '序号',
  width: 60,
  align: "center",
  customRender: function (t, r, index) {
    return parseInt(index) + 1;
  }
},
  {
    title: '采购项',
    dataIndex: 'departName',
    key: 'k2',
  },
  {
    title: '小产品编号',
    dataIndex: 'code',
  },
  {
    title: '员工姓名',
    dataIndex: 'customerName',
    key: 'k3',
  },
  {
    title: '员工工号',
    key: 'k4',
    dataIndex: 'customerCode'
  },
  {
    title: '品类名称',
    key: 'k5',
    dataIndex: 'productName'
  },
  {
    title: '产品编号',
    key: 'k6',
    dataIndex: 'productCode'
  },

];

// 产品已收
const Productget = [{
  dataIndex: 'k1',
  key: 'k1',
  title: '序号',
  width: 60,
  align: "center",
  customRender: function (t, r, index) {
    return parseInt(index) + 1;
  }
},
  {
    title: '采购项',
    dataIndex: 'departName',
    key: 'k2',
  },
  {
    title: '小产品编号',
    dataIndex: 'code',
  },
  {
    title: '员工姓名',
    dataIndex: 'customerName',
    key: 'k3',
  },
  {
    title: '员工工号',
    key: 'k4',
    dataIndex: 'customerCode'
  },
  {
    title: '品类名称',
    key: 'k5',
    dataIndex: 'productName'
  },
  {
    title: '产品状态',
    key: 'k6',
    dataIndex: 'status',
    customRender: (text) => {
      //字典值替换通用方法
      if (text == 1)
        return "缝制";
      else if (text == 2)
        return "滚烫";
      else if (text == 3)
        return "入库";
    }
  },
  {
    title: '操作',
    dataIndex: 'k7',
    scopedSlots: {
      customRender: 'k7'
    },
  },

];

const column3 = [{
  dataIndex: 'k1',
  key: 'k1',
  title: '序号',
  width: 60,
  align: "center",
  customRender: function (t, r, index) {
    return parseInt(index) + 1;
  }
},
  {
    title: '采购项',
    dataIndex: 'departName',
    key: 'k2',
  },
  {
    title: '员工姓名',
    dataIndex: 'customerName',
    key: 'k3',
  },
  {
    title: '员工工号',
    key: 'k4',
    dataIndex: 'customerCode'
  },
  {
    title: '品类名称',
    key: 'k5',
    dataIndex: 'productName'
  },
  {
    title: '批次信息',
    key: 'k7',
    dataIndex: 'k7',
    scopedSlots: {
      customRender: 'k7'
    },
  },


];

const column4 = [{
  dataIndex: 'k1',
  key: 'k1',
  title: '序号',
},
  {
    title: '员工部门',
    dataIndex: 'k2',
    key: 'k2',
  },
  {
    title: '员工姓名',
    dataIndex: 'k3',
    key: 'k3',
  },
  {
    title: '员工工号',
    key: 'k4',
    dataIndex: 'k4'
  },
  {
    title: '品类名称',
    key: 'k5',
    dataIndex: 'k5'
  },
  {
    title: '批次信息',
    key: 'k6',
    dataIndex: 'k6',
    scopedSlots: {
      customRender: 'k6'
    },
  },
];

const data1 = [{
  // k1: '1',
  // k2: '销售部',
  // k3: '支彬',
  // k4: 'ASIO01',
  // k5: '西装上衣',
  // k6: '返修',
  // k7: '查看返修参数'
}];

// @ is an alias to /src
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import JInput from '@/components/jeecg/JInput'
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import {getAction} from "../../api/manage";

export default {
  name: 'MyAfterSales',
  mixins: [JeecgListMixin],
  components: {
    JInput,
  },
  data() {
    return {
      FabricList: [], // 售后面料列表
      UPDATEPROID: '',// 更新产品状态的ID
      ProductStatus: '', // 选中的产品状态
      visible: false, // 更新产品状态的弹框
      visible2: false, // 查看产品批次的弹框
      batchName: '',  //批次名字
      packingName: '',//装箱名字
      thirdSn: '', //运单号
      remark: '', //备注
      RefustProductList: [], // 被拒绝的人员数据
      AgreeProductList: [], // 同意售后的人员数据
      ReceivingList: [], // 平台收货数据集合
      productGetList: [], // 产品已收人员列表
      BatchDetail: {}, // 批次基本信息
      packageRemark: '', // 保存产品（完成装箱的操作）
      outAfterProList: [], // 售后产品发货列表
      tankuangvisible: false,

      ProPici: '', // 产品批次
      ProBoxName: '',// 装箱单名称
      ProThreadSn: '', // 运单号
      selectPackageid: '', // 本次选中的装箱单ID

      locale,
      Productget,
      data1,
      boxList, // 装箱单表头
      column2,
      columnFabric,
      column1,
      column3,
      column4,
      datalist: [],
      detail: {
        afterSalesString: "",
        reason: "",
        createTime: "",
        afterPrice: "",
      },
      url: {
        getteamafterpeople: "/orderCenter/getAftersmallProduct", // 当前售后订单下的小产品
        tramAfterFabriclIst: "/orderCenter/tramAfterFabriclIst", // 当前售后的面料列表
        agreeAfter: "/orderCenter/agreeAfter", // 同意或拒绝小产品
        listRefustProduct: "/orderCenter/listRefustProduct", // 查询拒绝的产品记录LIST
        listAgreeProduct: "/orderCenter/listAgreeProduct", // 查询同意的产品记录LIST
        receiving: "/orderCenter/receiving", // 平台收货数据列表
        receiptsOrSubmit: "/orderCenter/receiptsOrSubmit", // 发货的确认收货与提交
        listProductget: "/orderCenter/listProductget", // 产品已收人员列表（已收售后小产品列表）
        updateAfterPro: "/orderCenter/updateAfterPro", // 修改产品状态
        getBatchByCode: "/orderCenter/getBatchByCode", // 搜索批次
        addProductonBox: "/orderCenter/addProductonBox", // 添加产品
        saveProInPPackage: "/orderCenter/saveProInPPackage", // 装箱之后的保存操作
        outAfterPro: "/orderCenter/outAfterPro", // 产看售后产品发货列表
        list: "/orderCenter/getAftersmallProduct",
        orderAfterdetail: "/orderAfter/getorderatferdetail",
        Aftertracklist: "/orderAfter/getAftertrack",
        /*fahuo: "/orderAfter/fahuo",
        pici: "/orderAfter/getonetrackafterorderpersonpici"*/
      },
      ipagination1: {
        current: '',
        pageSize: '',
        total: ''
      },
    }
  },
  created() {
    this.getteamafterpeople();
    this.tramAfterFabriclIstFunc();
    this.getAftertrack();
    this.getorderatferdetail();
    this.getRefustProductListFunc()
    this.listAgreeProductFunc()
    this.getReceivingListFunc()
    this.listProductgetFunc()
    this.outAfterProFunc()
  },
  methods: {

    /**
     * 获取售后的面料列表
     */
    tramAfterFabriclIstFunc() {
      getAction(this.url.tramAfterFabriclIst, {
        'afterCode': this.$route.query.after
      }).then(res => {
        this.FabricList = res.result
      })
    },

    test() {
      console.log(this.selectedRowKeys)
    },

    closeModel() {
      this.visible2 = false
    },

    /**
     * 查看批次弹框
     */
    watchBatchFunc(object) {
      this.visible2 = true
      this.ProPici = object.batchName
      this.ProBoxName = object.packingName
      this.ProThreadSn = object.thirdSn
    },

    /**
     * 售后产品发货列表
     */
    outAfterProFunc() {
      getAction(this.url.outAfterPro, {
        'afterCode': this.$route.query.after
      }).then(res => {
        if (res.code == '0') {
          this.outAfterProList = res.data
        }
      })
    },

    /**
     *批次装箱的保存功能（在添加产品之后）
     */
    saveProInPPackageFunc() {
      if (this.packageRemark == '') {
        this.$message.warning("请填写备注信息")
        return
      } else {
        getAction(this.url.saveProInPPackage, {
          'adterCode': this.$route.query.after,
          'remark': this.packageRemark,
          'afterOrderId': this.$route.query.id,
          'packageid': this.selectPackageid
        }).then(res => {
          if (res.code == '0') {
            this.listProductgetFunc()
            this.outAfterProFunc()
            this.$message.success("添加成功")
          } else {
            this.$message.error("暂时没有数据可以保存")
          }
        })
      }
    },

    /**
     * 添加产品到装箱单
     */
    addProductonBox(packageID) {
      if (this.selectedRowKeys == null || this.selectedRowKeys.length < 1) {
        this.$message.warning("请选中产品")
        return
      } else {
        getAction(this.url.addProductonBox, {
          'batchID': this.BatchDetail.id,
          'packageID': packageID,
          'productIDS': this.selectedRowKeys.toString()
        }).then(res => {
          if (res.code == '0') {
            this.selectPackageid = packageID
            this.$message.success('添加成功')
          } else {
            this.$message.error('添加失败')
          }
        })
      }
    },

    /**
     * 搜索批次
     */
    getBatchByCodeFunc() {
      if (this.batchName == '' || this.batchName == null) {
        this.$message.warning("请填写完整批次名称");
        return
      } else {
        getAction(this.url.getBatchByCode, {
          'orderSn': this.$route.query.orderSn,
          'batchName': this.batchName
        }).then(res => {
          if (res.code == '0') {
            this.BatchDetail = res.data
            if (this.BatchDetail == [] || this.BatchDetail == null) {
              this.$message.warning("该批次不存在或已发货，请检查批次名称是否输入正确")
            }
          }
        })
      }
    },

    /**
     * 获取选中售后产品的ID
     */
    getupdateIDfunc(id) {
      this.visible = true
      this.UPDATEPROID = id
    },

    /**
     * 修改产品状态
     */
    updateAfterProFunc() {
      if (this.ProductStatus == '') {
        this.$message.warning("请选择产品状态")
        return
      } else {
        getAction(this.url.updateAfterPro, {
          'id': this.UPDATEPROID,
          'status': this.ProductStatus
        }).then(res => {
          if (res.code == '0') {
            this.listProductgetFunc()
            this.visible = false
            this.$message.success("操作成功")
          } else {
            this.$message.error("操作失败")
          }
        })
      }
    },

    /**
     * 产品已收人员列表
     */
    listProductgetFunc() {
      getAction(this.url.listProductget, {
        'afterCode': this.$route.query.after
      }).then(res => {
        if (res.code == '0') {
          this.productGetList = res.data
        }
      })
    },

    /**
     * 平台收货的确认收货 或 提交
     * @param trackAfterID 选中的售后订单跟踪表ID
     * @param type 0 提交，1 确认收货
     * @param remark2 备注
     */
    receiptsOrSubmitFunc(trackAfterID, type, remark2) {
      if (remark2 == '') {
        this.$success.warning("请输入备注信息")
        return
      } else {
        getAction(this.url.receiptsOrSubmit, {
          'afterCode': this.$route.query.after,
          'afterOrderID': this.$route.query.id,
          'trackAfterID': trackAfterID,
          'type': type,
          'remark': remark2
        }).then(res => {
          if (res.code == '0') {
            this.$message.success('操作成功')
            this.getReceivingListFunc()
            this.listProductgetFunc()
          } else {
            this.$message.error('操作失败')
          }
        })
      }
    },

    /**
     * 平台收货数据
     */
    getReceivingListFunc() {
      getAction(this.url.receiving, {
        'afterOrderID': this.$route.query.id
      }).then(res => {
        if (res.code == '0') {
          this.ReceivingList = res.data
          var array = this.ReceivingList
          for (var i = 0; i < array.length; i++) {
            console.log('我是啊啊啊啊为什么' + array[i].isGet)
          }
        }
      })
    },

    /**
     * 获取同意的人员列表
     */
    listAgreeProductFunc() {
      getAction(this.url.listAgreeProduct, {
        'afterOrderID': this.$route.query.id
      }).then(res => {
        if (res.code == 0) {
          this.AgreeProductList = res.data
        }
      })
    },

    /**
     * 获取被拒绝的人员
     */
    getRefustProductListFunc() {
      getAction(this.url.listRefustProduct, {
        'afterOrderID': this.$route.query.id
      }).then(res => {
        if (res.code == 0) {
          this.RefustProductList = res.data
        }
      })
    },

    /**
     * 小产品的售后或者拒绝
     * @param isAgree 是否同意 0拒绝，1同意
     */
    afterAgreeFunc(isAgree) {
      if (this.selectedRowKeys.length == 0) {
        this.$message.warning("请选择人员")
        return
      } else {
        getAction(this.url.agreeAfter, {
          'afterOrderID': this.$route.query.id, // 售后订单表ID
          'remark': this.remark,                // 备注
          'afterCode': this.$route.query.after, // 售后订单编号
          'isAgree': isAgree,                   // 是否同意 0拒绝，1同意
          'smallProIDS': this.selectedRowKeys.toString() // 选中的小产品ID
        }).then(res => {
          this.selectedRowKeys = []
          if (res.code == '0') {
            this.getteamafterpeople()
            this.listAgreeProductFunc()
            this.getRefustProductListFunc()
            this.$message.success("操作成功")
          } else {
            this.$message.error("操作失败")
          }
        })
      }
    },

    /*showModal(id) {
      console.log("弹不出来？");
      this.tankuangvisible = true;
      this.getonetrackafterorderpersonpici(id);
    },*/
    handleOk(e) {
      console.log(e);
      this.tankuangvisible = false;
    },


    //查看某个售后小产品的批次信息
    /*getonetrackafterorderpersonpici(id) {
      getAction(this.url.pici, {
        'id': id
      }).then(res => {
        // this.data1 = res.data.data.records
        this.batchName = res.data.batch_name;
        this.packingName = res.data.packing_name;
        this.thirdSn = res.data.third_sn;
      })
    },*/

    //查看批次信息
    /*seepici(id) {
      console.log("哥们行不行？");
    },*/

    selectTab: function (dataStr, i) {
      this[dataStr] = i
    },

    //这里得查询这个团订售后订单中需要进行售后的人员列表（申请售后的小产品）
    getteamafterpeople() {
      getAction(this.url.getteamafterpeople, {
        'afterCode': this.$route.query.after
      }).then(res => {
        this.data1 = res.result.records
        this.ipagination1.current = res.result.current
        this.ipagination1.pageSize = res.result.size
        this.ipagination1.total = res.result.total
      })
    },

    // 分页器方法
    handleTableChange2(page, pageSize) {
      getAction(this.url.getteamafterpeople, {
        'pageNo': page.current,
        'pageSize': page.current.pageSize,
        'orderafterId': this.$route.query.id
      }).then(res => {
        if (res.code == '0') {
          this.data1 = res.result.records
          this.ipagination1.current = res.result.current
          this.ipagination1.pageSize = res.result.size
          this.ipagination1.total = res.result.total
        }
      })
    },

    //跳转去 团订售后的人员列表的详情
    /*getteamAfterpeopleDetail(id, afterCode) {
      this.$router.push({
        path: '/orderCenter/teamAfteronepersonDetail',
        query: {afterCode: afterCode, customerId: id}
      })
    },*/

    /*fahuo(item) {
      getAction(this.url.fahuo, {
        'courierName': this.courierName,
        'courierNumber': this.courierNumber,
        'aftertrackId': item.id,
        'afterId': this.$route.query.id,
        'ordertype': this.ordertype
      }).then(res => {
        this.getAftertrack();
      })
    },*/
    //查询该条售后的详情
    getorderatferdetail() {
      getAction(this.url.orderAfterdetail, {
        'id': this.$route.query.id
      }).then(res => {
        this.detail.afterSalesString = res.data.afterSalesString;
        this.detail.createTime = res.data.createTime;
        this.detail.reason = res.data.reason;
        this.detail.afterPrice = res.data.afterPrice;
      })
    },
    //查询该条售后订单的跟踪记录
    getAftertrack() {
      getAction(this.url.Aftertracklist, {
        'id': this.$route.query.id
      }).then(res => {
        this.datalist = res.data;
      })
    },
  }
}
</script>

<style scoped lang="less">
.content-box {
  background-color: #fff;
}

.roder-details {
  width: 80%;
  margin: 0 auto;
  background: #fff;
  padding: 0px 35px;

  .info {
    padding-top: 30px;
    padding-left: 26px;
    position: relative;
    min-height: 800px;

    .inputes {
      margin-bottom: 20px;
      display: flex;

      & > input {
        margin-right: 10px;
        width: 173px;
        height: 34px;
        padding: 3px 2px 3px 2px;
        font-family: 'ArialMT', 'Arial';
        font-weight: 400;
        font-style: normal;
        font-size: 13px;
        text-decoration: none;
        letter-spacing: normal;
        color: #000000;
        vertical-align: none;
        text-align: left;
        text-transform: none;
        background-color: transparent;
        border: 1px solid rgba(220, 223, 230, 1);
        padding-left: 4px;
      }
    }

    .fh {
      width: 82px;
      height: 36px;
      background-color: rgba(81, 81, 81, 1);
      border-radius: 3px;
      display: block;
      line-height: 36px;
      text-align: center;
      color: rgb(236, 227, 0);
    }

    .imgs {
      display: flex;
      margin-bottom: 20px;

      img {
        width: 88px;
        height: 88px;
        margin-right: 10px;
      }
    }


    .text11 {
      display: flex;
      margin-bottom: 20px;

      & > p {
        width: 100px;
        font-weight: 100;
        font-size: 14px;
        color: #333;

      }

      & > div {
        & > h5 {
          color: #333;
          font-size: 15px;
          font-weight: 500;

          display: block;
        }

        & > p {
          color: #333;
          font-size: 15px;
          font-weight: 100;

          display: block;
        }
      }
    }

    .title10 {
      color: #333;
      font-weight: 700;
      font-size: 16px;
      line-height: 16px;
      margin-bottom: 20px;
    }

    .text10 {
      display: flex;
      margin-bottom: 20px;

      & > p {
        width: 100px;
        font-weight: 100;
        font-size: 14px;
        color: #333;

      }

      div {
        span {
          color: #333;
          font-size: 15px;
          font-weight: 100;

          &.b {
            font-weight: 500;
          }

          display: block;
        }
      }
    }

    .table-css {
      position: relative;

      .bz {
        width: 447px;
        height: 63px;
        background: inherit;
        background-color: rgba(255, 221, 202, 1);
        position: absolute;
        right: 0px;
        top: -63px;
        display: flex;
        align-items: center;
        justify-content: center;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;

        p {
          width: 100%;
          color: rgb(251, 8, 8);
          font-size: 13px;
          padding-left: 10px;
          margin-bottom: 0px;
          line-height: 16px;
        }
      }
    }

    .btns {
      margin-top: 25px;
      margin-bottom: 60px;
      display: flex;

      .btn1 {

        border-width: 0px;
        width: 105px;
        height: 42px;
        background: inherit;
        background-color: rgba(81, 81, 81, 1);
        border: none;
        border-radius: 3px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
        font-weight: 500;
        font-style: normal;
        font-size: 13px;
        text-align: center;
        display: block;
        color: rgb(236, 227, 0);
        line-height: 40px;
        margin-right: 20px;
        cursor: pointer;
      }

      .btn2 {

        border-width: 0px;
        width: 105px;
        height: 42px;
        background: inherit;
        background-color: rgba(244, 244, 244, 1);
        border: none;
        border-radius: 3px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
        font-weight: 500;
        font-style: normal;
        font-size: 13px;
        text-align: center;
        display: block;
        color: rgb(104, 104, 104);
        line-height: 40px;
        margin-right: 20px;
        cursor: pointer;
      }
    }


    .price {
      color: rgb(38, 38, 38);
      font-size: 16px;

      span {
        color: rgb(215, 1, 1);
      }

      margin: 35px 0px;
    }

    .text1 {
      width: 533px;
      height: 105px;
      padding: 3px 2px 3px 2px;
      font-family: 'ArialMT', 'Arial';
      font-weight: 400;
      font-style: normal;
      font-size: 13px;
      text-decoration: none;
      letter-spacing: normal;
      color: #000000;
      vertical-align: none;
      text-align: left;
      text-transform: none;
      background-color: #f9f9f9;
      border-color: transparent;
      resize: none;
      outline: none;
      padding: 10px;
    }

    .tabs {
      .tab {
        margin-bottom: 10px;
        display: flex;

        h5 {
          width: 112px;
          padding: 2px 2px 2px 24px;
          background-color: rgba(249, 249, 249, 1);
          font-size: 15px;
          color: #333;
          display: flex;
          height: 36px;
          align-items: center;
          margin: 0px !important;
          margin-right: 6px !important;
        }

        .tab-content {
          height: 36px;
          display: flex;

          p {
            border: 1px solid rgb(242, 242, 242);
            min-width: 100px;
            height: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 15px;
            color: #333;
            font-size: 15px;
            margin-right: 6px;

            cursor: pointer;

            b {
              display: none;
              font-weight: 700;
            }

            &.active {
              color: rgb(255, 236, 112);
              font-weight: 700;
              background-color: rgb(74, 74, 74);
            }

            &:hover {
              b {
                display: block;
              }

              span {
                display: none;
              }
            }
          }
        }
      }
    }

    h3.title {
      height: 30px;
      line-height: 30px;
      position: relative;
      font-size: 16px;
      color: #333;
      font-weight: 700;
      margin-bottom: 25px;

      &:after {
        position: absolute;
        height: 100%;
        width: 5px;
        position: absolute;
        left: -25px;
        top: 0px;
        background-color: rgba(74, 74, 74, 1);
        content: "";
      }
    }

    .title2 {
      width: 112px;
      padding: 2px 2px 2px 24px;
      font-size: 15px;
      color: #333;
      display: flex;
      height: 36px;
      align-items: center;
      margin: 0px !important;
      margin-bottom: 10px !important;
    }

    .list {
      margin-bottom: 20px;

      .list-div {
        display: flex;
        flex-wrap: wrap;

        div {
          width: 33.3%;
          display: flex;
          height: 36px;
          align-items: center;

          p {
            width: 112px;
            padding: 2px 2px 2px 24px;
            background-color: rgba(249, 249, 249, 1);
            font-size: 15px;
            color: #333;
            display: flex;
            height: 36px;
            align-items: center;
            margin: 0px !important;
          }

          span {
            width: calc(100% - 112px);
            padding: 2px 2px 2px 24px;
            font-size: 15px;
            color: #333;
            display: flex;
            height: 36px;
            align-items: center;

            &.b {
              font-weight: 700;
            }
          }
        }
      }
    }
  }
}
</style>